<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./lib/mui/css/mui.css">
    <link rel="stylesheet" href="./lib/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="./styles/index.css">
    <title>pyg</title>
</head>

<body>
    <!-- 头部 -->
    <div class="pyg_header">
        <!-- 搜索框 -->
        <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" placeholder="">
        </div>
    </div>
    <!-- 中间内容 -->
    <div class="pyg_content">
        <!-- 轮播图开始 -->
        <div class="mui-slider">
            <!-- <div class="mui-slider-group mui-slider-loop">
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://140.143.222.79:8888/full/banner3.png" /></a></div>
                <div class="mui-slider-item"><a href="javascript:;"><img src="http://140.143.222.79:8888/full/banner1.png" /></a></div>
                <div class="mui-slider-item"><a href="javascript:;"><img src="http://140.143.222.79:8888/full/banner2.png" /></a></div>
                <div class="mui-slider-item"><a href="javascript:;"><img src="http://140.143.222.79:8888/full/banner3.png" /></a></div>
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://140.143.222.79:8888/full/banner1.png" /></a></div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div> -->
        </div>
        <!-- 轮播图结束 -->

        <!-- 导航栏开始 -->
        <div class="pyg_nav">
        </div>
        <!-- 导航栏结束 -->

        <!-- 商品列表开始 -->
        <div class="pyg_goodslist">
           
        </div>
        <!-- 商品列表結束 -->

    </div>
    <!-- 尾部 -->
    <div class="pyg_footer">
        <div>
            <a href="javascript:;" class="active">
                <span class="fa fa-home"></span>
                <span>首页</span>
            </a>
        </div>
        <div>
            <a href="javascript:;">
                <span class="fa fa-home"></span>
                <span>分类</span>
            </a>
        </div>
        <div>
            <a href="javascript:;">
                <span class="fa fa-home"></span>
                <span>购物车</span>
            </a>
        </div>
        <div>
            <a href="javascript:;">
                <span class="fa fa-home"></span>
                <span>我的</span>
            </a>
        </div>

    </div>

    <!-- 轮播图模板引擎设置 -->
    <script type="text/template" id="slider_temp">
        <div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{list[list.length-1].image_src}}" /></a></div>
    {{each list value}}

<div class="mui-slider-item"><a href="javascript:;"><img src="{{value.image_src}}"/></a></div>
    {{/each}}
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{list[0].image_src}}" /></a></div>

</div>
<div class="mui-slider-indicator">
    {{each list value index}}
<div class="mui-indicator {{index === 0 ? 'mui-active':' '}}"></div>
    {{/each}}
</div>
</script>
<!-- 导航栏设置模板引擎 -->
<script type="text/template" id="nav_temp">
{{each $data value}}
<a href="javascript:;">
<img src="{{value.image_src}}" alt="">
</a>
{{/each}}
</script>

<!-- 商品列表模板引擎 -->
<script type="text/template" id="goodslisttemp">
{{each list value}}
<div class="goodslist_box">
    <div class="title">
    <img src="{{value.group_img}}" alt="">
    </div>
    <!-- 模板引擎嵌套需要把第一次获取到的数据再次进行第二次嵌套使用 -->
    {{each value.goods value}}
    <div class="content">
        <a href="javascript:;">
        <img src="{{value.goods_small_logo}}" alt="">
        <span class="mui-ellipsis-2">{{value.goods_name}}</span>
        <span>￥{{value.goods_price}}</span>
        </a>
        <a href="javascript:;">
            找相似
        </a>
    </div>
    {{/each}}
</div>
{{/each}}
</script>
    <script src="./lib/mui/js/mui.js"></script>
    <script src="./lib/zepto/zepto.js"></script>
    <script src="./lib/arttemplate/template-web.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>